<template>
	<view>
		<!--顶部区域-->
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">text 文本组件</view>
		</view>
		<view class="smart-padding-wrap">
		    <view class="text-box" scroll-y="true">
		        <text>{{ text }}</text>
		    </view>
		    <button type="primary":disabled="!canAdd" @click="add">add line</button>
		    <button type="warn":disabled="!canRemove" @click="remove">remove line</button>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            texts: [
	                'HBuilder，400万开发者选择的IDE',
	                'HBuilderX，轻巧、极速，极客编辑器',
	                'uni-app，终极跨平台方案',
	                'HBuilder，400万开发者选择的IDE',
	                'HBuilderX，轻巧、极速，极客编辑器',
	                'uni-app，终极跨平台方案',
	                'HBuilder，400万开发者选择的IDE',
	                'HBuilderX，轻巧、极速，极客编辑器',
	                'uni-app，终极跨平台方案',
	                '……'
	            ],
	            text: '',
	            canAdd: true,
	            canRemove: false,
	            extraLine: []
	        };
	    },
	    methods: {
	        add: function(e) {
	            this.extraLine.push(this.texts[this.extraLine.length % 12]);
	            this.text = this.extraLine.join('\n');
	            this.canAdd = this.extraLine.length < 12;
	            this.canRemove = this.extraLine.length > 0;
	        },
	        remove: function(e) {
	            if (this.extraLine.length > 0) {
	                this.extraLine.pop();
	                this.text = this.extraLine.join('\n');
	                this.canAdd = this.extraLine.length < 12;
	                this.canRemove = this.extraLine.length > 0;
	            }
	        }
	    }
	};

</script>

<style>

</style>
